<template>
  <el-cascader
    ref="areaRef"
    v-model="area"
    :props="prop"
    placeholder="请选择所属区域"
    :disabled="disabled"
    :style="{ width: width }"
    :clearable="clearable"
    @change="changeSelect"
  />
</template>

<script setup>
import areaCode from '@/components/area-cascader/areaCode.js'
import { gerAreaByCode } from '@/api/api'
import {
  watch,
  computed,
  ref,
  onMounted,
  getCurrentInstance,
  reactive
} from 'vue'
const emit = defineEmits(['update:modelValue', 'areaChange'])
const props = defineProps({
  clearable: {
    type: Boolean,
    default: false
  },
  width: {
    type: String,
    default: '160px'
  },
  //  数据回显数组 ['省份id','市区id',...]
  defaultArea: {
    type: [String, Array, Number, null, undefined],
    default() {
      // 不传
      return [areaCode.defaultProvince]
    }
  },
  // 组件可选层级 0.只有省份 1.省、市 2.省、市、区 3.省、市、区、乡镇 4.省、市、区、乡镇、街道
  maxLevel: {
    type: Number,
    default: 4
  },
  // 用来控制前面几层不能选择 0.省份disabled 1.市disabled 2....
  // 如果设置了disabledLevel 必须传正确的defaultArea进来
  disabledLevel: {
    type: [Number, String],
    default: 0
  },
  // 父子强制关联 true:可选任意一级  false:只能选中最后一级
  strictly: {
    type: Boolean,
    default: true
  },
  disabled: {
    type: Boolean,
    default: false
  },
  /*
   * search 搜索时候使用的 返回的最后一级地区code
   * registerAddress 选择户籍地址时使用
   * normalAddress  选择常住地址时使用
   */
  useType: {
    type: String,
    default: 'search'
  }
})
const areaRef = ref(null)
const area = ref([])
const prop = reactive({
  lazy: true,
  label: 'name',
  checkStrictly: true,
  lazyLoad: async (node, resolve) => {
    const { data, level } = node
    if (data && data.children && data.children.length !== 0) {
      return resolve([])
    }
    if (level === 0) {
      // 获取全部省份
      const r = await getArea('000000')
      const targetData = []
      for (const item of r.data) {
        const temp = {
          id: item.id,
          name: item.name,
          value: item.id,
          disabled: calDiasbled(level),
          cannotClick: calCannotClick(level),
          leaf: false
        }
        if (props.disabledLevel > -1) {
          // eslint-disable-next-line eqeqeq
          // item.id == props.defaultArea[level] && targetData.push(temp)
          // 只push广东省
          item.id == areaCode.defaultProvince && targetData.push(temp)
        } else {
          targetData.push(temp)
        }
      }
      resolve(targetData)
    } else {
      // 根据省ID获取市
      const r = await getArea(data.id)
      const targetData = []
      for (const item of r.data) {
        const temp = {
          id: item.id,
          name: item.name,
          value: item.id,
          disabled: calDiasbled(level),
          cannotClick: calCannotClick(level),
          leaf: level >= props.maxLevel,
          loading: false
        }
        if (props.disabledLevel) {
          // 如果设置了不可选的level  node-level
          if (level > props.disabledLevel) {
            targetData.push(temp)
          } else {
            // eslint-disable-next-line eqeqeq
            item.id == props.defaultArea[level] && targetData.push(temp)
          }
        } else {
          targetData.push(temp)
        }
      }
      resolve(targetData)
    }
  }
})

onMounted(() => {
  if (props.defaultArea && props.defaultArea.length > 0) {
    props.defaultArea.forEach(item => {
      item && area.value.push(item)
    })
  }
})

function casClick(e) {
  console.log(e)
}
// 判断是否是最后一级叶节点
const calLeaf = nodeLevel => {
  if (nodeLevel >= props.maxLevel) {
    return true
  }
  return false
}

const calDiasbled = nodeLevel => {
  if (!props.strictly) {
    return false
  }
  // 如果是有层级选择限制的 && nodeLevel< 层级限制的level
  if (props.disabledLevel > 0) {
    if (nodeLevel < props.disabledLevel) {
      return true
    } else {
      return false
    }
  } else {
    return false
  }
}

const calCannotClick = nodeLevel => {
  // 如果是有层级选择限制的 && nodeLevel< 层级限制的level
  if (props.disabledLevel > 0) {
    if (nodeLevel < props.disabledLevel) {
      return true
    } else {
      return false
    }
  } else {
    return false
  }
}

const changeSelect = val => {
  if (props.useType == 'search') {
    emit('areaChange', [...val].slice(-1)[0])
  } else {
    emit('areaChange', [...val])
  }

  //   const arr = val
  //   console.log(val.value)
  //   debugger
  //   const registerAddress = {
  //     registerProvince: '',
  //     registerProvinceName: '',
  //     registerCity: '',
  //     registerCityName: '',
  //     registerCounty: '',
  //     registerCountyName: '',
  //     registerStreet: '',
  //     registerStreetName: '',
  //     registerCommunity: '',
  //     registerCommunityName: ''
  //   }
  //   const registerAddressNow = {
  //     registerProvinceNow: '',
  //     registerProvinceNameNow: '',
  //     registerCityNow: '',
  //     registerCityNameNow: '',
  //     registerCountyNow: '',
  //     registerCountyNameNow: '',
  //     registerStreetNow: '',
  //     registerStreetNameNow: '',
  //     registerCommunityNow: '',
  //     registerCommunityNameNow: ''
  //   }
  //   const normalAddress = {
  //     province: '',
  //     provinceName: '',
  //     city: '',
  //     cityName: '',
  //     county: '',
  //     countyName: '',
  //     street: '',
  //     streetName: '',
  //     community: '',
  //     communityName: ''
  //   }
  //   const operatorsAddress = {
  //     provinceCode: '',
  //     provinceName: '',
  //     cityCode: '',
  //     cityName: '',
  //     countyCode: '',
  //     countyName: '',
  //     streetCode: '',
  //     streetName: '',
  //     communityCode: '',
  //     communityName: ''
  //   }
  //   const registerAddressPG = {
  //     placeProvinceCode: '',
  //     placeProvinceName: '',
  //     placeCityCode: '',
  //     placeCityName: '',
  //     placeCountyCode: '',
  //     placeCountyName: '',
  //     placeStreetCode: '',
  //     placeStreetName: '',
  //     placeCommunityCode: '',
  //     placeCommunityName: ''
  //   }

  //   const registerAddressRegister = {
  //     registerProvinceCode: '',
  //     registerProvinceName: '',
  //     registerCityCode: '',
  //     registerCityName: '',
  //     registerCountyCode: '',
  //     registerCountyName: '',
  //     registerStreetCode: '',
  //     registerStreetName: '',
  //     registerCommunityCode: '',
  //     registerCommunityName: ''
  //   }

  //   const regionStatistics = [
  //     {
  //       areaName: '',
  //       areaCode: ''
  //     },
  //     {
  //       areaName: '',
  //       areaCode: ''
  //     },
  //     {
  //       areaName: '',
  //       areaCode: ''
  //     },
  //     {
  //       areaName: '',
  //       areaCode: ''
  //     },
  //     {
  //       areaName: '',
  //       areaCode: ''
  //     }
  //   ]

  //   console.log(areaRef)
  //   debugger
  //   const fullArea = areaRef.value.getCheckedNodes()[0]
  //   // console.log(fullArea);
  //   if (
  //     val &&
  //     val.length > 0 &&
  //     fullArea &&
  //     props.useType === 'registerAddress'
  //   ) {
  //     registerAddress.registerProvince = fullArea.pathValues[0] ? fullArea.pathValues[0] : ''
  //     registerAddress.registerProvinceName = fullArea.pathLabels[0]
  //       ? fullArea.pathLabels[0]
  //       : ''

  //     registerAddress.registerCity = fullArea.pathValues[1] ? fullArea.pathValues[1] : ''
  //     registerAddress.registerCityName = fullArea.pathLabels[1]
  //       ? fullArea.pathLabels[1]
  //       : ''

  //     registerAddress.registerCounty = fullArea.pathValues[2] ? fullArea.pathValues[2] : ''
  //     registerAddress.registerCountyName = fullArea.pathLabels[2]
  //       ? fullArea.pathLabels[2]
  //       : ''

  //     registerAddress.registerStreet = fullArea.pathValues[3] ? fullArea.pathValues[3] : ''
  //     registerAddress.registerStreetName = fullArea.pathLabels[3]
  //       ? fullArea.pathLabels[3]
  //       : ''

  //     registerAddress.registerCommunity = fullArea.pathValues[4] ? fullArea.pathValues[4] : ''
  //     registerAddress.registerCommunityName = fullArea.pathLabels[4]
  //       ? fullArea.pathLabels[4]
  //       : ''
  //   }
  //   if (val && val.length > 0 && fullArea && props.useType === 'normalAddress') {
  //     normalAddress.province = fullArea.pathValues[0] ? fullArea.pathValues[0] : ''
  //     normalAddress.provinceName = fullArea.pathLabels[0]
  //       ? fullArea.pathLabels[0]
  //       : ''

  //     normalAddress.city = fullArea.pathValues[1] ? fullArea.pathValues[1] : ''
  //     normalAddress.cityName = fullArea.pathLabels[1]
  //       ? fullArea.pathLabels[1]
  //       : ''

  //     normalAddress.county = fullArea.pathValues[2] ? fullArea.pathValues[2] : ''
  //     normalAddress.countyName = fullArea.pathLabels[2]
  //       ? fullArea.pathLabels[2]
  //       : ''

  //     normalAddress.street = fullArea.pathValues[3] ? fullArea.pathValues[3] : ''
  //     normalAddress.streetName = fullArea.pathLabels[3]
  //       ? fullArea.pathLabels[3]
  //       : ''

  //     normalAddress.community = fullArea.pathValues[4] ? fullArea.pathValues[4] : ''
  //     normalAddress.communityName = fullArea.pathLabels[4]
  //       ? fullArea.pathLabels[4]
  //       : ''
  //   }
  //   if (
  //     val &&
  //     val.length > 0 &&
  //     fullArea &&
  //     props.useType === 'operatorsAddress'
  //   ) {
  //     operatorsAddress.provinceCode = fullArea.pathValues[0] ? fullArea.pathValues[0] : ''
  //     operatorsAddress.provinceName = fullArea.pathLabels[0]
  //       ? fullArea.pathLabels[0]
  //       : ''

  //     operatorsAddress.cityCode = fullArea.pathValues[1] ? fullArea.pathValues[1] : ''
  //     operatorsAddress.cityName = fullArea.pathLabels[1]
  //       ? fullArea.pathLabels[1]
  //       : ''

  //     operatorsAddress.countyCode = fullArea.pathValues[2] ? fullArea.pathValues[2] : ''
  //     operatorsAddress.countyName = fullArea.pathLabels[2]
  //       ? fullArea.pathLabels[2]
  //       : ''

  //     operatorsAddress.streetCode = fullArea.pathValues[3] ? fullArea.pathValues[3] : ''
  //     operatorsAddress.streetName = fullArea.pathLabels[3]
  //       ? fullArea.pathLabels[3]
  //       : ''

  //     operatorsAddress.communityCode = fullArea.pathValues[4] ? fullArea.pathValues[4] : ''
  //     operatorsAddress.communityName = fullArea.pathLabels[4]
  //       ? fullArea.pathLabels[4]
  //       : ''
  //   }
  //   if (
  //     val &&
  //     val.length > 0 &&
  //     fullArea &&
  //     props.useType === 'registerAddressNow'
  //   ) {
  //     registerAddressNow.registerProvinceNow = fullArea.pathValues[0]
  //       ? fullArea.pathValues[0]
  //       : ''
  //     registerAddressNow.registerProvinceNameNow = fullArea.pathLabels[0]
  //       ? fullArea.pathLabels[0]
  //       : ''

  //     registerAddressNow.registerCityNow = fullArea.pathValues[1]
  //       ? fullArea.pathValues[1]
  //       : ''
  //     registerAddressNow.registerCityNameNow = fullArea.pathLabels[1]
  //       ? fullArea.pathLabels[1]
  //       : ''

  //     registerAddressNow.registerCountyNow = fullArea.pathValues[2]
  //       ? fullArea.pathValues[2]
  //       : ''
  //     registerAddressNow.registerCountyNameNow = fullArea.pathLabels[2]
  //       ? fullArea.pathLabels[2]
  //       : ''

  //     registerAddressNow.registerStreetNow = fullArea.pathValues[3]
  //       ? fullArea.pathValues[3]
  //       : ''
  //     registerAddressNow.registerStreetNameNow = fullArea.pathLabels[3]
  //       ? fullArea.pathLabels[3]
  //       : ''

  //     registerAddressNow.registerCommunityNow = fullArea.pathValues[4]
  //       ? fullArea.pathValues[4]
  //       : ''
  //     registerAddressNow.registerCommunityNameNow = fullArea.pathLabels[4]
  //       ? fullArea.pathLabels[4]
  //       : ''
  //   }

  //   if (
  //     val &&
  //     val.length > 0 &&
  //     fullArea &&
  //     props.useType === 'registerAddressPG'
  //   ) {
  //     registerAddressPG.placeProvinceCode = fullArea.pathValues[0]
  //       ? fullArea.pathValues[0]
  //       : ''
  //     registerAddressPG.placeProvinceName = fullArea.pathLabels[0]
  //       ? fullArea.pathLabels[0]
  //       : ''

  //     registerAddressPG.placeCityCode = fullArea.pathValues[1] ? fullArea.pathValues[1] : ''
  //     registerAddressPG.placeCityName = fullArea.pathLabels[1]
  //       ? fullArea.pathLabels[1]
  //       : ''

  //     registerAddressPG.placeCountyCode = fullArea.pathValues[2] ? fullArea.pathValues[2] : ''
  //     registerAddressPG.placeCountyName = fullArea.pathLabels[2]
  //       ? fullArea.pathLabels[2]
  //       : ''

  //     registerAddressPG.placeStreetCode = fullArea.pathValues[3] ? fullArea.pathValues[3] : ''
  //     registerAddressPG.placeStreetName = fullArea.pathLabels[3]
  //       ? fullArea.pathLabels[3]
  //       : ''

  //     registerAddressPG.placeCommunityCode = fullArea.pathValues[4]
  //       ? fullArea.pathValues[4]
  //       : ''
  //     registerAddressPG.placeCommunityName = fullArea.pathLabels[4]
  //       ? fullArea.pathLabels[4]
  //       : ''
  //   }
  //   if (
  //     val &&
  //     val.length > 0 &&
  //     fullArea &&
  //     props.useType === 'registerAddressRegister'
  //   ) {
  //     registerAddressRegister.registerProvinceCode = fullArea.pathValues[0]
  //       ? fullArea.pathValues[0]
  //       : ''
  //     registerAddressRegister.registerProvinceName = fullArea.pathLabels[0]
  //       ? fullArea.pathLabels[0]
  //       : ''

  //     registerAddressRegister.registerCityCode = fullArea.pathValues[1]
  //       ? fullArea.pathValues[1]
  //       : ''
  //     registerAddressRegister.registerCityName = fullArea.pathLabels[1]
  //       ? fullArea.pathLabels[1]
  //       : ''

  //     registerAddressRegister.registerCountyCode = fullArea.pathValues[2]
  //       ? fullArea.pathValues[2]
  //       : ''
  //     registerAddressRegister.registerCountyName = fullArea.pathLabels[2]
  //       ? fullArea.pathLabels[2]
  //       : ''

  //     registerAddressRegister.registerStreetCode = fullArea.pathValues[3]
  //       ? fullArea.pathValues[3]
  //       : ''
  //     registerAddressRegister.registerStreetName = fullArea.pathLabels[3]
  //       ? fullArea.pathLabels[3]
  //       : ''

  //     registerAddressRegister.registerCommunityCode = fullArea.pathValues[4]
  //       ? fullArea.pathValues[4]
  //       : ''
  //     registerAddressRegister.registerCommunityName = fullArea.pathLabels[4]
  //       ? fullArea.pathLabels[4]
  //       : ''
  //   }
  //   if (
  //     val &&
  //     val.length > 0 &&
  //     fullArea &&
  //     props.useType === 'regionStatistics'
  //   ) {
  //     regionStatistics[0].areaCode = fullArea.pathValues[0] ? fullArea.pathValues[0] : ''
  //     regionStatistics[0].areaName = fullArea.pathLabels[0]
  //       ? fullArea.pathLabels[0]
  //       : ''

  //     regionStatistics[1].areaCode = fullArea.pathValues[1] ? fullArea.pathValues[1] : ''
  //     regionStatistics[1].areaName = fullArea.pathLabels[1]
  //       ? fullArea.pathLabels[1]
  //       : ''

  //     regionStatistics[2].areaCode = fullArea.pathValues[2] ? fullArea.pathValues[2] : ''
  //     regionStatistics[2].areaName = fullArea.pathLabels[2]
  //       ? fullArea.pathLabels[2]
  //       : ''

  //     regionStatistics[3].areaCode = fullArea.pathValues[3] ? fullArea.pathValues[3] : ''
  //     regionStatistics[3].areaName = fullArea.pathLabels[3]
  //       ? fullArea.pathLabels[3]
  //       : ''

  //     regionStatistics[4].areaCode = fullArea.pathValues[4] ? fullArea.pathValues[4] : ''
  //     regionStatistics[4].areaName = fullArea.pathLabels[4]
  //       ? fullArea.pathLabels[4]
  //       : ''
  //   }

  //   if (props.useType === 'registerAddress') {
  //     emit('areaChange', registerAddress)
  //   } else if (props.useType === 'normalAddress') {
  //     emit('areaChange', normalAddress)
  //   } else if (props.useType === 'operatorsAddress') {
  //     emit('areaChange', operatorsAddress)
  //   } else if (props.useType === 'registerAddressNow') {
  //     emit('areaChange', registerAddressNow)
  //   } else if (props.useType === 'registerAddressPG') {
  //     emit('areaChange', registerAddressPG)
  //   } else if (props.useType === 'registerAddressRegister') {
  //     emit('areaChange', registerAddressRegister)
  //   } else if (props.useType === 'regionStatistics') {
  //     emit('areaChange', regionStatistics, arr)
  //   } else {
  //     emit('areaChange', { arr: arr })
  //   }
}

const getArea = code => {
  return gerAreaByCode(code)
}
</script>
<style lang="scss" scoped></style>
